import { useState, useEffect, } from "react"
function Header(){
  const [count, setCount] = useState(0)
  useEffect(() =>{
    // console.log('组件创建的时候，初始绑定一个事件')
    window.addEventListener('resize', () => {
      console.log('组件创建的时候，初始绑定一个事件')
    })
  },[]) // // 如果依赖项只写一个空数组，就表示这个副作用，只在组件挂载的时候执行一遍
  useEffect(() => {
    console.log(count);
    // 这种写法就是 初始挂载的时候走一次，每次count更新的时候也走一次
    // 这个副作用函数，只针对与count做一些操作
    document.title = `count修改${count}次`
  }, [count])
  useEffect(() => {
    console.log('这种写法，就是任何导致组件更新的逻辑，都会触发这个 副作用');
  })
  return(
    <>
    <h3>状态变量：{count}</h3>
     <button onClick={() => setCount(count+1)}>修改数据count</button>
    </>
  )
}

function App(){
  return(
    <>
    <Header/>
    </>
  )
}
export default App